<template>
	<u-modal :show="show" :negativeTop="200" :title="title" confirmText="确定" showCancelButton confirmColor="#FD8906"
		cancelColor="#000" @confirm="save" @cancel="show = false" @close="show = false" zoom>
		<view class="f-1 w100 f14">
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10"><text class="crb">*</text>服务费名称</view>
				<view class="f-g-1">
					<u--input placeholder="请输入服务费名称" :customStyl="{background:'#f3f3f3'}" v-model="form.name">
					</u--input>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">服务费方案</view>
				<view class="f-g-1">
					<u-radio-group v-model="form.type" placement="column" iconColor="#000" labelSize='14'>
						<u-radio :activeColor="subColor" :customStyle="{marginBottom: '15px'}" label="按就餐人数收取"
							name="1"></u-radio>
						<u-radio :activeColor="subColor" :customStyle="{marginBottom: '15px'}" label="按每桌台收取"
							name="2"></u-radio>
					</u-radio-group>
					<u-input placeholder="请输入金额" :customStyl="{background:'#f3f3f3'}" v-model="form.price">
						<template slot="suffix">
							<view>{{form.type == 1 ? "元/位" : "元/桌"}}</view>
						</template>
					</u-input>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10"><text class="crb">*</text>适用桌台</view>
				<view class="f-g-1">
					<zxz-uni-data-select v-model="form.tableId" :localdata="areaList" dataKey="name"
						dataValue="id" :multiple="true" placeholder="请选择桌台"></zxz-uni-data-select>
				</view>
			</view>
		</view>
	</u-modal>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		components: {

		},
		props: {
			mode: {
				type: String,
				default: () => 'single'
			},
			v: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				form: {
					name: "",
					type: '1',
					price: 0,
					tableId: [],
				},
				areaList:[],
				show: false,
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			open(v) {
				if (v.id) {
					this.title = '编辑服务费'
					this.form = JSON.parse(JSON.stringify(v))
				} else {
					this.title = '新增服务费'
					this.form = {
						name: "",
						type: '1',
						price: 0,
						tableId: [],
					}
				}
				this.fetchData()
				this.show = true
			},
			close() {
				this.show = false
			},
			async fetchData() {
				const {
					data:{ list, total, pageNo, pageSize }
				} = await this.beg.request({
					url: this.api.tableList,
					data: { pageNo: 1, pageSize: 999, filterServer: 1, serverId: this.form.id }
				})
				this.areaList = list ? list : []
			},
			async save() {
				if (!this.form.name) {
					return uni.showToast({
						title: '请输入服务费名称',
						icon: 'none'
					})
				}
				if (!this.form.price) {
					return uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
				}
				this.form.storeId = this.storeId
				const {
					msg
				} = await this.beg.request({
					url: this.form.id ? `${this.api.tableServer}/${this.form.id}` : this.api.tableServer,
					method: this.form.id ? 'PUT' : 'POST',
					data: this.form
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				this.show = false
				this.form = {
					name: "",
					type: '1',
					price: 0,
					tableId: [],
				}
				this.$emit('save')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.left {
		width: 140rpx;
		text-align: right;
	}
</style>